<template>
  <!-- 新房   二手房-->
  <div class="box" @click="ycdb()">
    <heads></heads>
    <tools></tools>
    <div class="tit1">
      <div class="list">
        <div class="li" style="cursor: pointer" @click="() => {
            $router.push('/');
          }
          ">
          <img src="../../assets/logo.png" />
          <!-- <span>帮帮同城</span> -->
        </div>
        <div :style="type == 'full' ? 'color:#64B6A8;' : ''" @click="toJump('inviteTime', 'full')">
          全职招聘
        </div>
        <div :style="type == 'part' ? 'color:#64B6A8;' : ''" @click="toJump('inviteTime', 'part')">
          兼职招聘
        </div>

        <div class="sousuo">
          <input type="text" @keyup.enter="search" v-model="searchtext" placeholder="请输入关键字" />
          <p class="el-icon-search" @click="search"></p>
        </div>
      </div>
    </div>
    <div class="saixuan">
      <bbzc-filter-2 :type="type" @getQueryData="getQueryData"></bbzc-filter-2>
      <!-- <div class="yixuan">
        <div class="na">已选条件：</div>
        <div
          class="li"
          v-for="(item, index) in screenList"
          :key="item.type + item.id"
        >
          {{ item.value }}
          <img src="../../assets/cha.png" @click="clear(item)" />
        </div>
        <div class="qinchu" @click="clear(-1)">
          清除全部
        </div>
      </div> -->
    </div>
    <div class="bottom">
      <div class="titLiat">
        精选
        <el-dropdown @command="handleCommand" trigger="click">
          <span class="el-dropdown-link">
            排序<i class="el-icon-sort el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="i.id" :class="sortIndex == i.id ? 'sortActive' : ''" v-for="(i, j) in sortArr"
              :key="j">{{ i.value }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="list">
        <invite-item v-for="(item, index) in housesList" :key="index" :item="item" :line="true" :pb="true"></invite-item>
      </div>
      <div class="fenye">
        <el-pagination background layout="prev, pager, next" :total="housesTotal" :current-page="HousesPage.pageNo"
          @current-change="HousesCurrentChange" :page-size="HousesPage.pageSize"></el-pagination>
      </div>
    </div>
    <floor></floor>
    <div class="gotop" @click="toTop" v-show="showToTop" style="left: calc(100vw / 2 + 600px);">
      <img src="@/assets/top.png" />返回顶部
    </div>
  </div>
</template>
<script>
import floor from "../../components/floor";
import heads from "../../components/head";
import tools from "../../components/tools";
import inviteItem from "./comp/item.vue";
import bbzcFilter2 from "@/views/invite/comp/bbzcFilter2.vue";

// import bbzcFilter2 from "./comp/bbzcFilter2.vue";

var dictionariesList = [];
export default {
  components: {
    floor,
    heads,
    tools,
    inviteItem,
    bbzcFilter2
  },
  data() {
    return {
      olds: 0,
      isshow: false,
      xuanzhong: 0,
      list: [
        {
          num: 0,
          name: "全部"
        },
        {
          num: 2,
          name: "个人"
        },
        {
          num: 1,
          name: "经纪人"
        }
      ],
      leibieIndex: -1,
      quyuIndex: -1,
      priceIndex: -1,
      loucIndex: -1,
      mianjiIndex: -1,

      jiaruXuan: "",
      jiaruXuan1: "",
      HousesPage: {
        pageNo: 1,
        pageSize: 10,
        upStatus: 1,
        examineStatus: 2,
        isLz: "0",
        orderSort: "1"
      },
      housesList: [],
      housesTotal: 0,
      type1: [],
      type7: [], //区域
      type08: [
        { valueName: "日结", valueNum: 1 },
        { valueName: "周结", valueNum: 2 },
        { valueName: "月结", valueNum: 3 },
        { valueName: "完工结算", valueNum: 4 },
        { valueName: "其他结算", valueNum: 5 }
      ], //结算方式
      type09: [], //薪资范围
      type010: [
        { valueName: "男", valueNum: 1 },
        { valueName: "女", valueNum: 2 }
      ], //性别要求
      type011: [], //岗位类型
      type012: [], //工作时段
      type013: [], // 用工日期
      type014: [
        { valueName: "短期兼职", valueNum: 1 },
        { valueName: "长期兼职", valueNum: 2 },
        { valueName: "周末兼职", valueNum: 3 }
      ], // 工作周期(可多选)
      type015: [
        { valueName: "包住宿", valueNum: 1 },
        { valueName: "包工作餐", valueNum: 2 },
        { valueName: "交通补助", valueNum: 3 },
        { valueName: "加班补助", valueNum: 4 },
        { valueName: "有提成", valueNum: 5 },
        { valueName: "奖金奖励", valueNum: 6 },
        { valueName: "转正机会", valueNum: 7 }
      ], // 福利(可多选)
      type016: [
        { valueName: "只看认证企业", valueNum: 1 },
        { valueName: "只看个人用工", valueNum: 2 }
      ], // 招聘者
      employmentDate: [],
      startTime: "",
      endTime: "",

      recomHousesList: [], //推荐房源信息
      recomstate: false, //是否出现推荐房源
      searchtext: "",
      loginstate: false,
      screenList: [],
      sortArr: [
        {
          id: 1,
          value: "最新发布"
        },
        {
          id: 2,
          value: "距离最近"
        }
      ],
      type: "",
      sortIndex: "",
      user: {}
    };
  },
  watch: {
    $route(to, from) {
      // if (to) {
      //   this.sortIndex = "";
      //   this.type = this.$route.query.type || "full";
      //   // this.init();
      // }
      this.init();
    }
  },
  mounted() { },
  async created() {
    this.type = this.$route.query.type || "full";
    await this.initMap();
    this.init();
    console.log(this.housesList, "222");
  },
  methods: {
    // 获取定位
    initMap() {
      let data = {
        key: "ZYIBZ-6VVRW-NCURN-O6GZO-2VRAH-KIBJV",
        output: "jsonp"
      };
      return this.$jsonp(
        "https://apis.map.qq.com/ws/location/v1/ip",
        data
      ).then(data => {
        let lat = data.result.location.lat;
        let lng = data.result.location.lng;
        // 经度
        this.longitude = data.result.location.lng;
        // 维度
        this.latitude = data.result.location.lat;
      });
    },
    toJump(path, type) {
      if (this.type == type) return false;
      const routeLink = this.$router.resolve({
        path: `${path}?type=${type}`
      });
      this.sortIndex = "";
      this.type = type;
      window.open(routeLink.href, "_self");
      // this.$router.push("index/" + type);
    },
    handleCommand(command) {
      this.HousesPage.pageNo = 1;
      this.sortIndex = command;
      this.getHouseInfo();
    },
    employmentDateClick() { },
    checkFilterData(arr = [], id, type) {
      return arr.filter(item => item.ftype == type && item.id == id).length > 0;
    },
    clear(item) {
      if (item != -1) {
        var type = item.ftype;
        if (type == "type") {
          //类别
          this.leibieClick(-1);
        } else if (type == "region") {
          //区域
          this.quyuClick(-1);
        } else if (type == "price") {
          // 价格
          this.priceClick(-1);
        } else if (type == "area") {
          // 面积
          this.mianjiClick(-1);
        } else if (type == "floor") {
          // 楼层
          this.loucClick(-1);
        }
      } else {
        this.leibieIndex = -1;
        delete this.HousesPage.type;
        this.quyuIndex = -1;
        delete this.HousesPage.region;
        this.priceIndex = -1;
        delete this.HousesPage.price;
        this.mianjiIndex = -1;
        delete this.HousesPage.area;
        this.loucIndex = -1;
        delete this.HousesPage.floor;
        this.getHouseInfo();
      }
    },
    dealOPe(newV) {
      var screenList = [];
      var checkArr = [];
      var labelKey = "";
      var obj = {};
      for (const key in newV) {
        if (Object.hasOwnProperty.call(newV, key)) {
          const element = newV[key];
          if (
            key == "type" ||
            key == "price" ||
            key == "region" ||
            key == "area" ||
            key == "floor"
          ) {
            labelKey = "";
            if (key == "type") {
              //类别
              checkArr = this.type1;
              labelKey = "valueNum";
            } else if (key == "region") {
              //区域
              checkArr = this.type7;
            } else if (key == "price") {
              // 价格
              checkArr = this.type8;
            } else if (key == "area") {
              // 面积
              checkArr = this.type9;
            } else if (key == "floor") {
              // 楼层
              labelKey = "valueNum";
              checkArr = this.type10;
            }
            labelKey = labelKey || "valueName";
            console.log(element, checkArr);
            obj = checkArr
              .filter(item => item[labelKey] == element)
              .map(item => {
                return {
                  ...JSON.parse(JSON.stringify(item)),
                  value: item.valueName,
                  ftype: key
                };
              });
            if (!this.checkFilterData(this.screenList, obj.id, key)) {
              console.log("进来了进来了");
              screenList.push(...obj);
              console.log(screenList);
            }
          }
        }
      }
      this.screenList = screenList;
    },
    ycdb() {
      this.isshow = false;
    },
    init() {
      console.log("this.$route.query", this.$route.query);
      this.type = this.$route.query.type || "full";
      if (this.type == "full") {
        // 全职
        this.recruitmentType = 1;
      } else {
        // 兼职
        this.recruitmentType = 2;
      }
      this.getUser();
      this.getHouseInfo();
      this.getDictionaries();
    },
    getUser() {
      let user = JSON.parse(localStorage.getItem("userInfo"));
      if (user != null) {
        this.user = user;
        this.loginstate = true;
      } else {
        this.loginstate = false;
      }
    },
    getQueryData(param) {
      this.getHouseInfo(param);
    },
    //查询房源信息
    getHouseInfo(param) {
      this.searchtext = this.$route.query.search || "";
      // this.dealOPe(JSON.parse(JSON.stringify(this.HousesPage)));
      this.$getHttp(
        "/api/mobile/personnelOwner/getRecruitmentByRecruitmentType",
        {
          publisherId: this.user.id || "",
          recruitmentType: this.recruitmentType || 1,
          pageNo: this.HousesPage.pageNo,
          pageSize: this.HousesPage.pageSize,
          latitude: this.latitude,
          longitude: this.longitude,
          ...param,
          searchKeyword: this.$route.query.search || "",
          sort: this.sortIndex
        }
      ).then(data => {
        if (data.code == 200) {
          //二手房 房源较少时出现推荐房源
          // this.recomstate = false;
          // if (this.HousesPage.newOld == 2 && data.count < 3) {
          //   this.recomstate = true;
          // }
          // const contrastIdList = JSON.parse(
          //   localStorage.getItem("contrastIdList")
          // );
          // //处理楼层信息
          // data.list.forEach(e => {
          //   if (contrastIdList != null) {
          //     e.houseContrast = false;
          //     contrastIdList.forEach(el => {
          //       if (el == e.id) {
          //         e.houseContrast = true;
          //       }
          //     });
          //   }
          //   if (e.hasOwnProperty("FLOOR")) {
          //     if (e.FLOOR.indexOf("|") == -1) {
          //       e.FLOOR = "";
          //     } else {
          //       e.FLOOR =
          //         e.FLOOR.split("|")[0] +
          //         "层/" +
          //         "共" +
          //         e.FLOOR.split("|")[1] +
          //         "层";
          //     }
          //   }
          //   if (!e.hasOwnProperty("shop_name")) {
          //     e.shop_name = "个人房源";
          //   }
          // });
          //查询是否加入对比
          this.housesList = data.recruitmentInformation.pageList;
          this.housesTotal = data.recruitmentInformation.pageCount;

          console.log(this.housesList, "222");
        }
      });
    },
    //查询字典(筛选条件)
    getDictionaries() {
      // this.$getHttp("/mob/home/getDictionaries", { type: "7,8,9,10,1" }).then(
      //   data => {
      //     if (data.code == 200) {
      //       data.list.forEach(e => {
      //         if (e.type == 7) this.type7.push(e);
      //         if (e.type == 8) this.type8.push(e);
      //         if (e.type == 9) this.type9.push(e);
      //         if (e.type == 10) this.type10.push(e);
      //         if (e.type == 1) this.type1.push(e);
      //       });
      //       dictionariesList = data.list;
      //       console.log(data);
      //     }
      //   }
      // );
    },

    search() {
      if (this.searchtext.trim() != "") {
        this.openUrls("inviteTimeinviteTime", {
          search: this.searchtext
        });
        this.getHouseInfo();
      }
      // this.$router.push({
      //   path: "/index/houseSearch",
      //   query: {
      //     search: this.searchtext,
      //   },
      // });
    },
    floor(a) {
      var fool = a.split(",");
      if (fool[0] == 1) return fool[1] + "层/" + fool[2] + "层";
      if (fool[0] == 2)
        return fool[1] + "层-" + fool[2] + "层/共" + fool[3] + "层";
      if (fool[0] == 3) return "独栋/共" + fool[1] + "层";
    },
    titClick(index) {
      this.xuanzhong = index;
      this.HousesPage.pageNo = 1;
      if (index != 0) {
        this.HousesPage.userType = index;
        this.getHouseInfo();
        return;
      }
      delete this.HousesPage.userType;
      this.getHouseInfo();
    },

    quyuClick(item) {
      this.HousesPage.pageNo = 1;
      if (item != -1) {
        this.quyuIndex = item.valueNum;
        this.HousesPage.region = item.valueName;

        this.getHouseInfo();
        return;
      }
      this.quyuIndex = item;
      delete this.HousesPage.region;
      this.getHouseInfo();
    },
    priceClick(item) {
      this.HousesPage.pageNo = 1;
      if (item != -1) {
        this.priceIndex = item.valueNum;
        this.HousesPage.price = item.valueName;
        this.getHouseInfo();
        return;
      }
      this.priceIndex = item;
      delete this.HousesPage.price;
      this.getHouseInfo();
    },
    mianjiClick(item) {
      this.HousesPage.pageNo = 1;
      if (item != -1) {
        this.mianjiIndex = item.valueNum;
        this.HousesPage.area = item.valueName;
        this.getHouseInfo();
        return;
      }
      this.mianjiIndex = item;
      delete this.HousesPage.area;
      this.getHouseInfo();
    },
    loucClick(item) {
      this.HousesPage.pageNo = 1;
      if (item != -1) {
        this.loucIndex = item.valueNum;
        this.HousesPage.floor = item.remarks;

        this.getHouseInfo();
        return;
      }
      this.loucIndex = item;
      delete this.HousesPage.floor;
      this.getHouseInfo();
    },
    HousesCurrentChange(e) {
      this.scrollToElement(document.querySelector(".bottom"));
      this.HousesPage.pageNo = e;
      this.housesList = [];
      this.getHouseInfo();
    },
    jiaru(id) {
      if (!this.loginstate) {
        this.$message({
          message: "请登录！",
          type: "error",
          offset: 120,
          duration: 2000
        });
        return false;
      }
      this.jiaruduibi(id);
    },
    jiaruJin(num) {
      this.jiaruXuan = num;
    },
    jiaruChu() {
      this.jiaruXuan = "";
    },
    jiaruJin1(num) {
      this.jiaruXuan1 = num;
      this.isshow = true;
    },
    jiaruChu1(id) {
      this.jiaruXuan1 = "";
      this.jiaruduibi(id);
      window.event ? (window.event.cancelBubble = true) : e.stopPropagation(); //阻止冒泡
    },
    jiaruduibi(id) {
      let contrastIdList = JSON.parse(localStorage.getItem("contrastIdList"));
      if (contrastIdList && contrastIdList.length >= 4) {
        this.$message({
          message: "最多4套进行对比",
          type: "error",
          offset: 120,
          duration: 2000
        });
        return;
      }
      if (contrastIdList == null) {
        let list = [id];
        localStorage.setItem("contrastIdList", JSON.stringify(list));
      } else {
        contrastIdList.push(id);
        localStorage.setItem("contrastIdList", JSON.stringify(contrastIdList));
      }
      this.housesList.forEach(e => {
        if (e.id == id) {
          e.houseContrast = true;
        }
      });
      this.$message({
        message: "已加入对比！",
        type: "success",
        offset: 120,
        duration: 2000
      });
    },
    quxiaoduibi(id) {
      let contrastIdList = JSON.parse(localStorage.getItem("contrastIdList"));
      for (var i = 0; i < contrastIdList.length; i++) {
        if (contrastIdList[i] == id) {
          contrastIdList.splice(i, 1);
        }
      }
      localStorage.setItem("contrastIdList", JSON.stringify(contrastIdList));
      this.housesList.forEach(e => {
        if (e.id == id) {
          e.houseContrast = false;
        }
      });
      this.$message({
        message: "已取消对比！",
        type: "error",
        offset: 120,
        duration: 2000
      });
    },
    duibiqx(id) {
      if (!this.loginstate) {
        this.$message({
          message: "请登录！",
          type: "error",
          offset: 120,
          duration: 2000
        });
        return false;
      }
      this.quxiaoduibi(id);
    },
    details(id, event) {
      console.log(11111);
      if (event.target._prevClass == "t_1_1") {
      } else {
        this.$router.push({
          path: "/index/newHouseDetails",
          query: {
            id: id
          }
        });
      }
    },
    cutHome(type, old) {
      if (type == 2) {
        this.HousesPage.pageNo = 1;
        this.HousesPage.transactionType = 2;
        if (old == 1) {
          this.olds = 1;
          this.HousesPage.newOld = 1;
          this.getHouseInfo();
        } else {
          this.olds = 0;
          this.HousesPage.newOld = 2;
          this.getHouseInfo();
        }
      } else if (type == 1) {
        this.$router.push({
          path: "/index/lease",
          query: {
            transactionType: type
          }
        });
      }
    },
    shopdetails(item) {
      if (item.shop_name == "个人房源") {
        this.$message({
          message: "个人房源！",
          type: "error",
          offset: 120,
          duration: 2000
        });
      } else {
        this.$router.push({
          path: "/index/ShopDetails",
          query: {
            id: item.shop_id
          }
        });
      }
    },
    toAgent(item) {
      if (!item.shop_id) {
        this.$router.push({
          path: "/index/goldConsultant",
          query: {
            id: item.user_id
          }
        });
        return;
      }
      this.$router.push({
        path: "/index/goldConsultant",
        query: {
          id: item.user_id
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.box {
  position: relative;
  padding-bottom: 200px;
}

.tit1 {
  width: 100%;
  height: 120px;
  background-color: #f2f2f2;

  .list {
    width: 1200px;
    margin-left: 50%;
    padding-top: 32px;
    transform: translateX(-50%);
    background-color: #f2f2f2;

    div {
      display: inline-block;
      vertical-align: middle;
      font-size: 20px;
      color: #333333;
      margin-right: 40px;
      cursor: pointer;
    }

    .li {
      font-size: 28px;
      color: #64b6a8;
      margin-right: 60px;

      img {
        /* width: 60px;
					height: 60px; */
      }

      span {
        vertical-align: middle;
      }
    }

    .sousuo {
      position: relative;
      display: inline-block;
      vertical-align: middle;
      width: 380px;
      height: 50px;
      background: #ffffff;
      border-radius: 4px;
      font-size: 18px;
      overflow: hidden;

      input {
        width: 300px;
        height: 55px;
        line-height: 55px;
        text-indent: 16px;
        font-size: 18px;
      }

      img {
        width: 25px;
        height: 25px;
        margin-left: 20px;
        cursor: pointer;
      }

      p {
        position: absolute;
        top: 0;
        right: 0;
        width: 80px;
        height: 55px;
        background-color: #64b6a8;
        text-align: center;
        line-height: 55px;
        font-size: 24px;
        cursor: pointer;
        color: #ffffff;
      }
    }

    .but {
      display: inline-block;
      width: 200px;
      height: 50px;
      background: #64b6a8;
      border-radius: 6px;
      text-align: center;
      line-height: 50px;
      color: #fff;
    }
  }
}

.saixuan {
  color: #333;
  width: 1200px;
  // margin-left: 50%;
  // transform: translateX(-50%);
  font-size: 0;
  margin: auto;
  margin-top: 40px;
  padding-bottom: 20px;

  .li {
    .p1 {
      display: inline-block;
      font-size: 16px;
      font-weight: 600;
      margin-right: 24px;
      vertical-align: top;
      min-width: 72px;
    }

    .p2 {
      display: inline-block;
      font-size: 16px;
      margin-right: 32px;
      vertical-align: top;
      cursor: pointer;
    }

    div {
      display: inline-block;
      font-size: 16px;
      margin-right: 30px;
      vertical-align: top;
      margin-bottom: 10px;
    }

    .list {
      width: 940px;

      /deep/ .el-date-editor--time-select:first-child {
        position: relative;

        &::after {
          content: "至";
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: -24px;
        }
      }

      .custom {
        display: flex;
        align-items: center;
        margin-bottom: 0;

        .custom_title {
          font-size: 16px;
          font-weight: 400;
          color: #333333;
          margin-right: 7px;
        }

        .custom_input_wrap {
          position: relative;
          margin-right: 12px;
          margin-bottom: 0;

          &::after {
            content: "元";
            position: absolute;
            top: 45%;
            transform: translateY(-50%);
            right: 6px;
          }
        }

        .custom_input {
          box-sizing: border-box;
          width: 78px;
          height: 32px;
          background-color: #ffffff;
          border-radius: 4px;
          border: 1px solid #d0d0d0;
          padding: 10px;
          padding-right: 24px;
        }

        .custom_qd {
          width: 78px;
          height: 32px;
          background-color: #64b6a8;
          border-radius: 4px;
          font-size: 16px;
          font-weight: 600;
          color: #ffffff;
          text-align: center;
          line-height: 32px;
          margin-left: 12px;
          margin-right: 12px;
          cursor: pointer;
        }

        .bq {
          width: 20px;
          height: 32px;
          color: #000;
          font-size: 16px;
          text-align: center;
          line-height: 32px;
          margin-right: 12px;
          margin-bottom: 0;
        }
      }

      div {
        cursor: pointer;
      }
    }

    .xuan {
      color: #64b6a8;
    }
  }
}

.bottom {
  width: 1200px;
  margin-left: 50%;
  transform: translateX(-50%);
  color: #333333;
  margin-top: 0px;

  .tit {
    font-weight: 600;
    font-size: 32px;
    margin-bottom: 24px;
  }

  .list {
    width: 100%;

    .li {
      position: relative;
      padding-bottom: 24px;
      margin-bottom: 24px;
      border-bottom: 1px solid #e0e0e0;

      .biao {
        width: 300px;
        height: 200px;
        border-radius: 10px;
      }

      .duibi {
        position: absolute;
        width: 300px;
        height: 200px;
        top: 0;
        left: 0;
        background-color: rgba(51, 51, 51, 0.64);
        cursor: pointer;

        p {
          position: absolute;
          width: 130px;
          height: 48px;
          line-height: 48px;
          text-align: center;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          border-radius: 24px;
          color: #fff;
          border: 2px solid #ffffff;
          font-size: 21px;
        }
      }

      .name {
        display: inline-block;
        vertical-align: top;
        margin-left: 24px;
        position: relative;
        height: 200px;
        width: 700px;
        cursor: pointer;

        .t_1 {
          position: relative;
          font-size: 26px;

          padding-bottom: 12px;

          .t_1_1 {
            position: absolute;
            width: 130px;
            height: 58px;
            top: 30px;
            z-index: 999999;
            //top: 30px;
            //right: 20px;
          }
        }

        .t_1_1 {
          position: absolute;
          width: 130px;
          height: 58px;
          top: 30px;
          z-index: 999999;
          left: 120px;
          //top: 30px;
          //right: 20px;
        }

        .t_2 {
          font-size: 18px;
          color: #666666;
          margin-top: 12px;
        }

        .t_3 {
          font-size: 18px;
          color: #666666;
          margin-top: 12px;
        }

        .t_4 {
          position: absolute;
          font-size: 18px;
          color: #666666;
          bottom: 0;
          left: 0;

          img {
            width: 31px;
            height: 31px;
          }

          div {
            display: inline-block;
            //width: 90px;
            padding: 0px 5px;
            height: 30px;
            background: #ffffff;
            border: 1px solid #64b6a8;
            border-radius: 4px;
            text-align: center;
            line-height: 30px;
            margin-left: 24px;
            color: #64b6a8;
          }
        }
      }

      .qian {
        position: absolute;
        top: 62px;
        right: 0;
        width: 190px;

        .p1 {
          width: 100%;
          font-size: 32px;
          color: #e00000;
          text-align: center;
          margin-bottom: 10px;
        }

        .p2 {
          width: 100%;
          font-size: 18px;
          color: #333333;
          text-align: center;
        }
      }
    }
  }

  .titLiat {
    width: 1200px;
    margin-left: 50%;
    transform: translateX(-50%);
    margin-bottom: 16px;
    font-weight: 600;
    font-size: 32px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;

    // el-icon-sort
    /deep/ .el-dropdown-selfdefine {
      padding: 1px 8px;
      margin-left: 20px;
      vertical-align: text-bottom;
      cursor: pointer;
      width: 96px;
      height: 32px;
      line-height: 32px;
      background: #ffffff;
      border-radius: 4px 4px 4px 4px;
      opacity: 1;
      border: 1px solid #999999;

      font-size: 20px;
      font-weight: 400;
      color: #333333;
    }

    .li {
      display: inline-block;
      vertical-align: top;
      margin-right: 40px;
      color: #333;
      cursor: pointer;

      p {
        font-size: 24px;
      }

      img {
        width: 40px;
        height: 20px;
        margin-left: 50%;
        transform: translateX(-50%);
      }
    }

    .cur {
      color: #64b6a8;
      border: 0;
      transform: scale(1.1);
    }
  }
}

.fenye {
  width: 100%;
  height: 50px;
  text-align: center;
  margin: 60px 0px;

  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #64b6a8;
  }
}

.yixuan {
  box-sizing: border-box;
  padding-top: 15px;
  padding-left: 16px;
  width: 1200px;
  min-height: 60px;
  background-color: #f7f7f7;
  margin-left: 50%;
  transform: translateX(-50%);
  font-size: 16px;

  .na {
    color: #333333;
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
  }

  .li {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding: 4px 28px 4px 10px;
    color: #333333;
    color: #64b6a8;
    border: 1px solid #64b6a8;
    margin-right: 12px;

    img {
      position: absolute;
      width: 17px;
      height: 17px;
      top: 7px;
      right: 3px;
      cursor: pointer;
    }
  }

  .qinchu {
    display: inline-block;
    vertical-align: middle;
    width: 86px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #999999;
    font-size: 16px;
    color: #ffffff;
    cursor: pointer;
  }

  .qinchu,
  .li,
  .na {
    margin-bottom: 12px;
  }
}

/deep/.el-dropdown {
  font-size: 18px;
}

.sortActive {
  color: rgb(100, 182, 168) !important;
}

.yixuan {
  box-sizing: border-box;
  padding-top: 15px;
  padding-left: 16px;
  width: 1200px;
  min-height: 60px;
  background-color: #f7f7f7;
  margin-left: 50%;
  transform: translateX(-50%);
  font-size: 16px;

  .na {
    color: #333333;
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
  }

  .li {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding: 4px 28px 4px 10px;
    color: #333333;
    color: #64b6a8;
    border: 1px solid #64b6a8;
    margin-right: 12px;

    img {
      position: absolute;
      width: 17px;
      height: 17px;
      top: 7px;
      right: 3px;
      cursor: pointer;
    }
  }

  .qinchu {
    display: inline-block;
    vertical-align: middle;
    width: 86px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #999999;
    font-size: 16px;
    color: #ffffff;
    cursor: pointer;
  }

  .qinchu,
  .li,
  .na {
    margin-bottom: 12px;
  }
}
</style>
